/**
*@description 可以点击的柱状图（X周文字倾斜角度）
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';

const BarClick = ({seriesName, width, height, data, onEvents, loading, dispatch }) => {
     if(!data || (data.value && data.value.length<=0)){return (<div className="emptyData">暂无数据</div>)}

    let option =  {
        /*toolbox: {
            show: true,
            right:20,
            feature: {
                saveAsImage: {backgroundColor:'#000000',icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}
            }
        },*/
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'none'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color:'#fff',
        textStyle:{
            color:'#fff'
        },
        grid: {
            bottom: '30%',
            containLabel: false
        },
        xAxis : [
            {
                type : 'category',
                data : data && data.category || [],
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:'#bdbdbd'
                    }
                },
                axisLabel: {
                     interval:0,//横轴信息全部显示
                     rotate: 45,
                     formatter:function(val){
                        return val.substring(0,8)+(val.length>8?"...":""); //val.split("").join("\n"); //横轴信息文字竖直显示
                    }
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:false
                },
                axisLine:{
                    show:false,
                    lineStyle:{
                        color:'#bdbdbd'
                    }
                },
                axisLabel:{
                    show:false
                },
                axisTick:{
                    show:false,
                    lineStyle:{
                        color:'#bdbdbd'
                    }
                },
            }
        ],
        series : [
            {
                name:seriesName,
                type:'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter:function(arg){
                            return (parseInt(arg.value).formatMoney())
                        }
                    }
                },
                //barWidth: '60%',
                data: data && data.value || []
            }
        ]
    };

    let timeId = 'bar'+new Date().getTime(), exExcel = function(){
        let temp = [];
        data.value.map(function(item, index){
            temp.push([item.value]);
        })
        toExcel(data.category, seriesName, temp);
    };

      return (
        <div>
        <div className="downloads">
                <span className="dimg" onClick={downImg.bind(this,timeId,seriesName)}></span>
                <span className="desl" onClick={exExcel.bind(this)}></span>
          </div>
          <div id={timeId}><ReactEcharts
                option={option} 
                style={{width:width, height: height}}
                theme={"theme_name"}
                onEvents={onEvents}
                showLoading={loading} /></div>
        </div>
      );
};

BarClick.propTypes = {
    width:PropTypes.string.isRequired,
    height:PropTypes.number.isRequired,
    loading:PropTypes.bool,
    seriesName:PropTypes.string,
    onEvents: PropTypes.object,
    data: PropTypes.object//.isRequired
};

export default connect()(BarClick);